<template>
  <!-- 选择商品 -->
  <div>
    <div style="display: flex; justify-content: end; margin-bottom: 10px">
      <a-input-search
        allowClear
        v-model:value="pageSet.productName"
        placeholder="请输入产品名称"
        enter-button
        @search="loadPagination(true)"
        style="width: 300px"
      />
    </div>
    <a-table
      size="small"
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      bordered
      :pagination="false"
      row-key="id"
      :preserveSelectedRowKeys="true"
      :row-selection="{
        selectedRowKeys: selectedRowKeysList,
        onChange: onSelectChange,
        preserveSelectedRowKeys: true,
        getCheckboxProps: (record) => ({
          disabled: record.id == presentIds
        })
      }"
      :scroll="{x: 700, y: 500}"
    ></a-table>
    <Pagination
      :pageSet="pageSet"
      style="margin-top: 10px"
      :loadPagination="loadPagination"
    ></Pagination>

    <div v-if="flagDetail">
      <div
        class="mt-10"
        style="
          font-size: 16px;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>已选择的商品：</span>
        <span>已选择{{ detailList.length }}项商品</span>
      </div>
      <div class="areadySelect mb-10">
        <div
          class="flex-row-ycenter label"
          v-for="(item, index) in detailList"
          :key="item.id"
        >
          <div>{{ item.productName }}</div>
          <div class="close" @click="deleteTarget(index)">
            <component
              class="fs-20 c-999 pointer"
              is="close-circle-outlined"
            ></component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed, nextTick} from "vue";
import {productInfoPage} from "@/api/merchandise/commodity";
import Pagination from "@/components/pagination/Pagination.vue";
import {arithmetic} from "@/utils/common";
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);
const props = defineProps({
  //选中的商品ID集合
  list: {
    type: Array,
    default: []
  },
  //是否展示商品选中项
  flagDetail: {
    type: Boolean,
    default: false
  },
  //选中的商品详情列表
  detail: {
    type: Array,
    default: []
  },
  //当前操作的商品ID
  presentId: {
    type: String,
    default: ""
  }
});
//删除标签
const deleteTarget = (index) => {
  detailList.value.splice(index, 1);
};
const emits = defineEmits(["update:list", "update:data", "update:detail"]);
const selectedRowKeysList = computed({
  get() {
    return props.list;
  },
  set(value) {
    emits("update:list", value);
  }
});
const detailList: any = computed({
  get() {
    selectedRowKeysList.value = props.detail.map((item: any) => {
      return item.id;
    });
    return props.detail;
  },
  set(value) {
    emits("update:detail", value);
  }
});
const presentIds: any = computed({
  get() {
    return props.presentId || "";
  },
  set(value) {}
});
function onSelectChange(selectedRowKeys: any, data) {
  selectedRowKeysList.value = selectedRowKeys;
  if (props.flagDetail) {
    let list: any = [];
    let list1: any = JSON.parse(JSON.stringify(detailList.value));
    data.forEach((item) => {
      if (item) {
        let flag = true;
        detailList.value.forEach((v) => {
          if (item.id == v.id) {
            flag = false;
          }
        });
        if (flag) {
          list1.push(item);
        }
      }
    });
    list1.forEach((item) => {
      if (selectedRowKeys.includes(item.id)) {
        list.push(item);
      }
    });
    detailList.value = list;
  }
}
const columns = ref<Array<any>>([
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "产品名称",
    dataIndex: "productName",
    align: "center",
    width: 200
  },
  {
    title: "产品编码",
    dataIndex: "productCode",
    align: "center",
    width: 140
  },
  {
    title: "规格型号",
    dataIndex: "spec",
    align: "center",
    width: 120
  },
  {
    title: "类别",
    dataIndex: "sapProductTypeName",
    align: "center",
    width: 200
  }
]);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  publishStatus: 1
});
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  productInfoPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination();
</script>
<style lang="less" scoped>
.areadySelect {
  border: 1px solid #dedede;
  padding: 15px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;

  .label {
    padding: 4px 10px;
    background-color: #f1f1f1;
    border-radius: 4px;
    position: relative;
    margin-bottom: 20px;

    & + .label {
      margin-left: 20px;
    }

    .close {
      position: absolute;
      right: -10px;
      top: -10px;
      z-index: 10;
    }
  }
}
</style>
